<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="JQuery.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="JQuery.js"></script>
	<title>JQuery</title>
</head>
<body>
		<header>
			<div id="title">
				Play with JQuery!
			</div>
			<div id="ctime"></div>
			<nav>
				<ul>
					<li><a class="main-menu" href="#">Basic JS</a></li>
					<li><a class="main-menu" href="#">Hangman</a></li>
					<li><a class="main-menu" href="#">jQuery</a></li>
					<li><a class="main-menu" href="#">Advanced JS</a></li>
				</ul>
			</nav>
		</header>
		<div id="content">
			<div class="lab">
				<div class="out">
					<p>마우스를 여기로 움직이세요.</p>
					<p>0</p>
				</div>
				<button id="max_screen">전체 화면 보기</button>
			</div>
		</div>
		<div class = "lab">
			<button id = "theone">Does nothing...</button>
			<button id = "bind">Add Click</button>
			<button id = "unbind">Remove</button>
			<div id = "off_test" style="display: none;">Click</div>
		</div>
		<div class="lab">
			<div id="trigger_test">
				<button>Button #1</button>
				<button>Button #2</button>
				<div><span>0</span> button #1 clicks.</div>
				<div><span>0</span> button #2 clicks.</div>
			</div>
		</div>
		<div class="lab">
			<h3>이미지 변경하기</h3>
			<div id="imageArea">
				<img id="image" src="img1.jpg" width="240">
			</div>
		</div>
		<div class="lab">
			<h3>사진 앨범</h3>
			<div>
				<img id="imgAlbum" width="250" height="250">
			</div>
		</div>
		<div class="lab" id="schedule">
			<div id="schedule_header">
				<h2>스케줄 노트</h2>
				<div id="add_img"><img src="plus_img.jpg" width="30"></div>
			</div>
			<div id="note_form">
				<table>
					<tr>
						<td>제목:</td><td><input id="note_title" type="text"></td>
					</tr>
					<tr>
						<td>날짜:</td><td><input id="note_date" type="date"></td>
					</tr>
					<tr>
						<td>내용:</td><td><textarea id="note_content" rows=20 cols=50></textarea></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><button id="add_node">확인</button></td>
					</tr>
				</table>
			</div>
			<div id="note"></div>
		</div>
		<div class="lab">
			<div id="animation_test">
				<button id="moving_button">click</button>
				<div id="moving_box"></div>
			</div>
		</div>
		<div class="lab">
			<dl class="accordion">
				<dt>item 1</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 2</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 3</dt>
				<dd>some explanation here. some explanation here.</dd>
			</dl>
			<dl class="accordion">
				<dt>item 1</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 2</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 3</dt>
				<dd>some explanation here. some explanation here.</dd>
			</dl>
		</div>
		<div class="lab">
			<h1>slideshow</h1>
			<div class="slideshow">
				<img src="photo1-1.jpg" alt="" />
				<img src="photo1-2.jpg" alt="" / class="alt" />
				<img src="photo1-3.jpg" alt="" / class="alt" />
				<img src="photo1-4.jpg" alt="" / class="alt" />
				<img src="photo1-5.jpg" alt="" / class="alt" />
			</div>
			<div class="slideshow">
				<img src="photo2-1.jpg" alt="" />
				<img src="photo2-2.jpg" alt="" / class="alt" />
				<img src="photo2-3.jpg" alt="" / class="alt" />
				<img src="photo2-4.jpg" alt="" / class="alt" />
				<img src="photo2-5.jpg" alt="" / class="alt" />
			</div>
			<div class="slideshow">
				<img src="photo3-1.jpg" alt="" />
				<img src="photo3-2.jpg" alt="" / class="alt" />
				<img src="photo3-3.jpg" alt="" / class="alt" />
				<img src="photo3-4.jpg" alt="" / class="alt" />
				<img src="photo3-5.jpg" alt="" / class="alt" />
			</div>
		</div>
		<div class="lab">
				<h2>JSON TEST</h2>
				<div id="textbox"></div>
				<button id="getTest">data 가져오기</button>
			</div>
		<div class="lab">
			<div id="news">
			</div>
		</div>
		<footer>
			<p>Web Programming, Spring 2024</p>
			<p>Created by 유흠</p>
		</footer>
</body>
</html>